<!--
- Author:   .
- Date:    2017/7/17 0017.
- File:    list.
-->
<template>
  <div class="Web_Box">
    <app-down></app-down>
    <div class="newlist"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <ul>
        <li class=" f-cb" @click="gotoNewsDetail(item)" v-for="item in newsList.data">
          <!--<div class="mewimg">-->
            <!--<img style="width: 100%" :src="item.head_img" @error="test" alt="">-->
          <!--</div>-->
          <div>
            <p class="text3">{{item.article_title}}</p>
            <p class="time">{{item.article_time | timestampToDate('yyyy-MM-dd hh:mm')}}</p></div>
        </li>
      </ul>
      <loading-more :allLoaded="newsList.allLoaded" :show="newsList.data.length > 0"></loading-more>
      <empty-data :show="newsList.allLoaded && newsList.data.length <= 0"></empty-data>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        defaultImg: require('../../assets/images/logo-img.png'),
        newsList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getNewsList(this.newsList.page, this.newsList.pageSize)
    },
    methods: {
      test(e) {
        e.target.src = this.defaultImg
      },
      gotoNewsDetail(item) {
        if (item.article_url) {
          this.gotoIframe(item.article_url)
        } else {
          this.$router.push({name: 'news-detail', params: {id: item.article_id}})
        }
      },
      gotoIframe(url) {
        this.$router.push({name: 'iframe', query: {url: url, share: 'true'}})
      },
      getNewsList(page, pageSize) {
        this.newsList.loading = true
        this.$request.getNewsList(page, pageSize).then(data => {
          if (data.length < this.newsList.pageSize) {
            this.newsList.allLoaded = true
          }
          this.newsList.data = [...this.newsList.data, ...data]
        }).finally(() => {
          this.newsList.requested = true
          this.newsList.loading = false
        })
      },
      loadMore() {
        if (this.newsList.loading || this.newsList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getNewsList(++this.newsList.page, this.newsList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>